<template>
    <el-drawer
        size="300"
        :show-close="false"
        :modal="false"
        :visible.sync="drawer">
        <div style="padding: 10px" :key="key">
            <el-form label-position="left" label-width="100px" v-model="itemBorder">
                <el-form-item  label="边框宽度">
                  <el-input-number v-model="itemBorder.width" :min="0" :max="10" size="mini"></el-input-number>
                </el-form-item>
                <el-form-item  label="边框样式">
                  <el-select v-model="itemBorder.type" placeholder="normal" size="mini">
                    <el-option label="————————" value="solid"/>
                    <el-option label="------------------------" value="dashed"/>
                    <el-option label="························" value="dotted"/>
                    <el-option label="double" value="double"/>
                    <el-option label="groove" value="groove"/>
                    <el-option label="ridge" value="ridge"/>
                    <el-option label="inset" value="inset"/>
                    <el-option label="outset" value="outset"/>
                  </el-select>
                </el-form-item>
                <el-form-item  label="边框颜色">
                  <el-color-picker v-model="itemBorder.color" @active-change="color" show-alpha size="small"></el-color-picker>
                </el-form-item>
                <el-form-item  label="边框圆角">
                  <el-input-number v-model="itemBorder.radius" :min="0" size="mini"></el-input-number>
                </el-form-item>
            </el-form>
        </div>
    </el-drawer>
</template>

<script>

export default {
  data () {
    return {
      key: 1,
      drawer: false
    }
  },
  methods: {
    color (val) {
      this.itemBorder.color = val
    }
  },
  computed: {
    itemBorder () {
      return this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent[this.$store.state.insideActiveArrayIndex].itemBorder
    }
  },
  watch: {
  },
  components: {
  }
}
</script>

<style scoped>
    .el-form-item {
        margin-bottom: 0px
    }
</style>
